<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
  <div class="ui-mode-container flex1 flex-col">
    <div class="ui-mode-content flex1">
      <!-- 从以下所标识单元开始到单元结束，根据每个项目主页面数量决定，如果有四个主页面就放四个，以此类推 -->
      <!-- 单元开始 -->
      <div
        class="ui-mode-box"
        :style="{ display: index == 0 ? 'block' : 'none' }"
      >
        <inner-home v-if="menu[0].flag"></inner-home>
      </div>
      <!-- 单元结束 -->
      <div
        class="ui-mode-box"
        :style="{ display: index == 1 ? 'block' : 'none' }"
      >
        <inner-history v-if="menu[1].flag"></inner-history>
      </div>
      <div
        class="ui-mode-box"
        :style="{ display: index == 2 ? 'block' : 'none' }"
      >
        <inner-my v-if="menu[2].flag"></inner-my>
      </div>
    </div>
    <!-- 底部Tab栏的样式在@/assets/css/main.less进行调整 -->
    <!-- 底部Tab栏的图片在路径@/assets/images/menu进行替换 -->
    <div class="ui-nav-item flex-row align-stretch">
      <div
        class="button flex1 flex-col align-center"
        :key="i"
        v-for="(item, i) in menu"
        :class="{ active: index == i }"
        @click="handleChangeTab(i)"
      >
        <div class="menu-img-box">
          <template v-if="i == 0">
            <img
              v-if="index == i"
              class="menu-img"
              src="@/assets/images/menu/menu_1_select.svg"
            />
            <img
              v-else
              class="menu-img"
              src="@/assets/images/menu/menu_1.svg"
            />
          </template>
          <template v-if="i == 1">
            <img
              v-if="index == i"
              class="menu-img"
              src="@/assets/images/menu/menu_2_select.svg"
            />
            <img
              v-else
              class="menu-img"
              src="@/assets/images/menu/menu_2.svg"
            />
          </template>
          <template v-if="i == 2">
            <img
              v-if="index == i"
              class="menu-img"
              src="@/assets/images/menu/menu_3_select.svg"
            />
            <img
              v-else
              class="menu-img"
              src="@/assets/images/menu/menu_3.svg"
            />
          </template>
        </div>
        <span>
          {{ item.title }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import mixinCommon from "@/views/content/mixins/common";
import mixinRequest from "@/views/content/mixins/request";
import menuData from "@/assets/data/menu";
import innerHome from "./home/index";
import innerMy from "./my/index";
import innerHistory from "./history/index";
import mixinShare from "./mixins/share";
import { goLogin } from "@/utils/tool";
export default {
  name: "front_page_index",
  data() {
    return {
      index: null,
      // 根据每个项目主页面数量决定，如果有四个主页面就放四个，以此类推
      menu: [
        {
          flag: false,
          title: "今天",
          login: false,
        },
        {
          flag: false,
          title: "历史",
          login: true,
        },
        {
          flag: false,
          title: "我的",
          login: true,
        },
      ],
    };
  },
  components: {
    innerHome,
    innerMy,
    innerHistory,
    mixinCommon,
    mixinRequest,
  },
  mixins: [mixinShare],
  computed: {
    getRedirectKey() {
      // 根据每个项目主页面数量决定，如果有四个主页面就放四个，以此类推
      return {
        home: 0,
        history: 1,
        my: 2,
      };
    },
    getIndex() {
      let index = this.getRedirectKey[this.$route.query.redirect];
      if (index == undefined) {
        index = 0;
      }
      return index;
    },
  },
  watch: {
    resourceLoaded: {
      handler(flag) {
        this.$nextTick(this.init);
      },
      immediate: true,
    },
    getIndex() {
      console.log(111, ">>>", this.getIndex);
      this.handleChangeTab(this.getIndex);
    },
  },
  created() {},
  mounted() {},
  methods: {
    /*
     * 初始化
     */
    init() {
      var params = this.Qs.stringify({
        invoke_method: "user_and_shop_info",
      });
      this.$axios
        .post("duzikai_api_customer_public_base_info_mgr", params)
        .then((res) => {
          if (res.status == 0) {
            if (
              res.returnData.public_user_info &&
              res.returnData.public_user_info.user_phone == "x-teamer"
            ) {
              this.public_agent_info = res.returnData.public_agent_info || {};
              this.public_user_info = res.returnData.public_user_info || {};
              document.title = this.public_agent_info.application_name;
              console.log(this.public_user_info.id_public_user_info);
              this.setState({
                key: "public_agent_info",
                value: this.public_agent_info,
              });
              this.setState({
                key: "public_user_info",
                value: this.public_user_info,
              });
              this.setLoginStatus({
                status: true,
                token: `${res.returnData.token_type} ${res.returnData.access_token}`,
                expires: res.returnData.token_expires_time,
              });
              this.setUserInfo(this.public_user_info);
              this.$root.$children[0].$children[0].refresh(() => {
                this.handleChangeTab(this.getIndex);
              });
            } else {
              this.handleChangeTab(this.getIndex);
            }
          } else if (res.status == 999201) {
            this.handleMockLogin().then(() => {
              this.handleChangeTab(this.getIndex);
            });
          }
        });
    },
    /*
     * APP和H5使用特殊账号模拟登录 H5即非APP&非微信&非小程序,默认即H5
     */
    handleMockLogin() {
      return new Promise((resolve, reject) => {
        if (
          !this.isLogin &&
          (this.isAPP || (!this.isAPP && !this.isWeixin && !this.isMiniProgram))
        ) {
          this.$http
            .post({
              name: "login",
              data: {
                invoke_method: "login_by_password",
                pre_cmd_para_need_pic_code: false,
                user_phone: "x-teamer",
                password_user: "jlt110",
              },
              loading: {
                enabled: false,
              },
            })
            .then(({ result, response }) => {
              resolve({ result, response });
            })
            .catch(({ msg }) => {
              reject({ msg });
            });
        } else {
          resolve();
        }
      });
    },
    /*
     * 获取菜单
     */
    getMenuList() {
      return new Promise((resolve, reject) => {
        let result = menuData.returnData;
        this.setMenuList(result.list);
        resolve(result.list);
      });
    },
    /*
     *  tab切换
     */
    handleChangeTab(i) {
      if (i != this.index) {
        this.index = i;
        if (!this.menu[this.index].flag) {
          this.menu[this.index].flag = !this.menu[this.index].flag;
        }
        console.log(this.menu);
        this.initBridgeShare();
        this.goRedirect();
      }
    },
    /*
     * 跳转redirect
     */
    goRedirect() {
      let redirect = {};
      Object.keys(this.getRedirectKey).forEach((key) => {
        redirect[this.getRedirectKey[key]] = key;
      });
      if (
        !(
          this.$route.query.redirect &&
          this.$route.query.redirect == redirect[this.index]
        )
      ) {
        let query = {
          redirect: redirect[this.index],
        };
        this.$router.push({
          path: "/front_page_index",
          query: query,
        });
      }
      this.$nextTick(() => {
        if (this.menu[this.index].login && !this.isLogin) {
          goLogin(this.$route);
        }
      });
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="less" scoped></style>
